<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>族谱网 - 首页</title>


<link href="${ctx}/assets/bootstrap-3.3.7-dist/css/bootstrap.min.css"
	rel="stylesheet">
<script src="${ctx}/assets/jquery/jquery2.2.4.min.js"></script>
<script src="${ctx}/assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

<link href="${ctx}/assets/fs002/fs_0.2.css" rel="stylesheet">
<link href="${ctx}/assets/fitness/all_fit.css" rel="stylesheet">
<link href="${ctx}/assets/fitness/index_fit.css" rel="stylesheet">

<style type="text/css">
.dropbtn {
	background: rgb(248, 119, 9);
	margin-left: 10px;
	color: white;
	padding: 10px 20px;
	font-size: 16px;
	border: none;
	cursor: pointer;
	border-top: 1px solid rgb(222, 208, 33);
	border-left: 1px solid rgb(222, 208, 33);
	border-right: 1px solid rgb(222, 208, 33);
	border-radius: 4px 4px 0 0;
	margin-top: 10px;
	/*margin-left: 10px;
    color: #fff;
    background: rgb(248,119,9);
    padding: 10px 20px;
    margin-top: 10px;
    border-top: 1px solid rgb(222,208,33);
    border-left: 1px solid rgb(222,208,33);
    border-right: 1px solid rgb(222,208,33);
    border-radius: 4px 4px 0 0;*/
}

.dropbtn:hover, .dropbtn:focus {
	background-color: rgb(268, 139, 9);
}

.dropdown {
	position: relative;
	display: inline-block;
}

.dropdown-content {
	display: none;
	position: absolute;
	background-color: #f9f9f9;
	min-width: 160px;
	overflow: auto;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	z-index: 1;
}

.dropdown-content a {
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
}

.dropdown a:hover {
	background-color: #f1f1f1
}

.show {
	display: block;
}
</style>

<style type="text/css">
* {
	margin: 0;
	padding: 0;
}

.clears {
	clear: both;
}
/*messages*/
.messages {
	padding: 15px 0;
}

.messages input, .messages select, .messages textarea {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	font-family: "Microsoft Yahei";
}

.messlist {
	height: 30px;
	margin-bottom: 10px;
}

.messlist label {
	float: left;
	width: 108px;
	height: 30px;
	font-size: 14px;
	line-height: 30px;
	text-align: right;
	padding-right: 10px;
}

.messlist input {
	float: left;
	width: 300px;
	height: 28px;
	padding-left: 5px;
	border: #ccc 1px solid;
}

.messlist.textareas {
	height: auto;
}

.messlist textarea {
	float: left;
	width: 400px;
	height: 110px;
	padding: 5px;
	border: #ccc 1px solid;
}

.messlist.yzms input {
	width: 100px;
}

.messlist.yzms .yzmimg {
	float: left;
	margin-left: 10px;
}

.messsub {
	padding: 0px 0 0 110px;
}

.messsub input {
	width: 105px;
	height: 35px;
	background: #ddd;
	font-size: 14px;
	font-weight: bold;
	cursor: pointer;
	margin-right: 5px
}

.messsub input:hover {
	background: #f60;
	color: #fff;
}
</style>
<style>
#verify {
	height: 34px;
	vertical-align: top;
	font-size: 16px;
}

#code_img {
	width: 100px;
	height: 34px;
	cursor: pointer;
	vertical-align: top;
	margin-left: 17px;
}
</style>

<script type="text/javascript">
	/* 点击按钮，下拉菜单在 显示/隐藏 之间切换 */
	function myFunction() {
		document.getElementById("myDropdown").classList.toggle("show");
	}

	// 点击下拉菜单意外区域隐藏
	window.onclick = function(event) {
		if (!event.target.matches('.dropbtn')) {

			var dropdowns = document.getElementsByClassName("dropdown-content");
			var i;
			for (i = 0; i < dropdowns.length; i++) {
				var openDropdown = dropdowns[i];
				if (openDropdown.classList.contains('show')) {
					openDropdown.classList.remove('show');
				}
			}
		}
	}
</script>
</head>
<body>
	<div class="container-fluid zp-topper">
		<div class="row">
			<div class="container">
				<img src="${ctx}/assets/img/logo.png"> 
			</div>
		</div>
	</div>


	<div class="navbar navbar-default">
		<div class="container">
			<a class="navbar-brand" href="#"></a>
			<div class="collapse navbar-collapse" id="topbar">
				<ul class="nav navbar-nav">
					<!-- <li class=""><a href="${ctx}/">首页</a></li> -->
					<c:if test="${not empty loginUser}">
						<li class=""><a href="${ctx}/index">家学渊源</a></li>
						<li class=""><a href="#">我的博客</a></li>
						<li class=""><a href="#">保存中心</a></li>
					</c:if>
	                <!-- <li class=""><a href="${ctx}/list">百家姓</a></li>
	                <li class=""><a href="${ctx}/lyan">留言板</a></li> -->
					<!--  <li class=""><a>搜索查询</a></li> -->
				</ul>
				<ul class="nav navbar-nav navbar-right">
					<c:choose>
						<c:when test="${empty loginUser}">
							<li class=""><a href="${ctx}/sign">登陆账号</a></li>
						</c:when>
						<c:otherwise>
							<div class="dropdown">
								<button onclick="myFunction()" class="dropbtn">${loginUser.name }</button>
								<div id="myDropdown" class="dropdown-content">
									<a href="#home">个人信息</a> <a href="${ctx }/logout">退出</a>
								</div>
							</div>
						</c:otherwise>
					</c:choose>
				</ul>
			</div>
		</div>
	</div>

	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<div class="panel panel-warning"
					style="padding-bottom: 30px; min-height: 700px; display: inline-block;">
					<div class="panel-heading">留言与反馈</div>
					<div class="panel-body" style="padding-left: 0px; width: 1000px">
						<form action="#" method="get" class="messages">
							<div class="messlist">
								<label>姓名</label> <input type="text" placeholder="姓名" />
								<div class="clears"></div>
							</div>
							<div class="messlist">
								<label>电子邮件</label> <input type="text" placeholder="电子邮件" />
								<div class="clears"></div>
							</div>
							<div class="messlist">
								<label>手机号</label> <input type="text" placeholder="手机号" />
								<div class="clears"></div>
							</div>
							<div class="messlist textareas">
								<label>留言内容</label>
								<textarea placeholder="留言内容"></textarea>
								<div class="clears"></div>
							</div>
							<div class="messlist yzms">
								<label>验证码</label> <input class="topAlign" id="verify"
									name="verify" type="text" placeholder="验证码" />

								<canvas width="100" height="40" id="verifyCanvas"></canvas>
								<img id="code_img">
								<div class="clears"></div>
							</div>
							<div class="messsub" style="">
								<input type="submit" value="提交"
									style="background-color: rgb(255, 147, 38); color: #fff; margin-right: 5px;" />
								<input type="reset" value="重填" />
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="container-fluid"
		style="background: #fff; padding-top: 10px;">
		<div class="container">
			<div id="footer" style="margin-bottom: 20px;">
				<ul id="copyright" style="margin-left: 0px; line-height: 130%;">

					<div style="width: 300px; margin: 0 auto; padding: 20px 0;">
						<a target="_blank"
							# style="display: inline-block; text-decoration: none; height: 20px; line-height: 20px;"><p
								style="float: left; height: 20px; line-height: 20px; margin: 0px 0px 0px 5px; color: #939393;">粤公网安备
								43018102000107号</p></a>
					</div>
			</div>
		</div>
	</div>

	<script>
		var nums = [ "1", "2", "3", "4", "5", "6", "7", "8", "9", "0", 'A',
				'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M',
				'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y',
				'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k',
				'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w',
				'x', 'y', 'z' ];

		drawCode();
		// 绘制验证码
		function drawCode() {
			var canvas = document.getElementById("verifyCanvas"); //获取HTML端画布
			var context = canvas.getContext("2d"); //获取画布2D上下文
			context.fillStyle = "cornflowerblue"; //画布填充色
			context.fillRect(0, 0, canvas.width, canvas.height); //清空画布
			context.fillStyle = "white"; //设置字体颜色
			context.font = "25px Arial"; //设置字体
			var rand = new Array();
			var x = new Array();
			var y = new Array();
			for (var i = 0; i < 5; i++) {
				rand[i] = nums[Math.floor(Math.random() * nums.length)]
				x[i] = i * 16 + 10;
				y[i] = Math.random() * 20 + 20;
				context.fillText(rand[i], x[i], y[i]);
			}
			//画3条随机线
			for (var i = 0; i < 3; i++) {
				drawline(canvas, context);
			}

			// 画30个随机点
			for (var i = 0; i < 30; i++) {
				drawDot(canvas, context);
			}
			convertCanvasToImage(canvas)
		}

		// 随机线
		function drawline(canvas, context) {
			context.moveTo(Math.floor(Math.random() * canvas.width), Math
					.floor(Math.random() * canvas.height)); //随机线的起点x坐标是画布x坐标0位置，y坐标是画布高度的随机数
			context.lineTo(Math.floor(Math.random() * canvas.width), Math
					.floor(Math.random() * canvas.height)); //随机线的终点x坐标是画布宽度，y坐标是画布高度的随机数
			context.lineWidth = 0.5; //随机线宽
			context.strokeStyle = 'rgba(50,50,50,0.3)'; //随机线描边属性
			context.stroke(); //描边，即起点描到终点
		}
		// 随机点(所谓画点其实就是画1px像素的线，方法不再赘述)
		function drawDot(canvas, context) {
			var px = Math.floor(Math.random() * canvas.width);
			var py = Math.floor(Math.random() * canvas.height);
			context.moveTo(px, py);
			context.lineTo(px + 1, py + 1);
			context.lineWidth = 0.2;
			context.stroke();

		}
		// 绘制图片
		function convertCanvasToImage(canvas) {
			document.getElementById("verifyCanvas").style.display = "none";
			var image = document.getElementById("code_img");
			image.src = canvas.toDataURL("image/png");
			return image;
		}

		// 点击图片刷新
		document.getElementById('code_img').onclick = function() {
			$('#verifyCanvas').remove();
			$('#verify')
					.after(
							'<canvas width="100" height="40" id="verifyCanvas"></canvas>')
			drawCode();
		}
	</script>

</body>
</html>